<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head th:include="common/common::header">
    <style type="text/css">
        .layui-breadcrumb{  /*最后的pic为字段的field*/
            background: red;
        }
    </style>


</head>
<body>
<div class="x-nav">
		<span class="layui-breadcrumb"> <a href="">首页</a> <a href="">演示</a>
			<a> <cite>导航元素</cite>
		</a> </span> <a class="layui-btn layui-btn-small"
                        style="line-height:1.6em;margin-top:3px;float:right"
                        href="javascript:location.replace(location.href);" title="刷新">
    <i class="layui-icon" style="line-height:30px">&#xe666</i>
</a>
</div>
<blockquote class="layui-elem-quote news_search" style="margin-top: 10px;height: 35px;">
    <form class="layui-form" action="">
        <div class="layui-inline" style="margin-left: -15px;">
            <label class="layui-form-label">订单状态:</label>
            <div class="layui-input-inline"  >
                <select name="status1" id="status1" lay-filter="type" style="width:150px;height:35px">
                    <option value="">请选择</option>
                    <option value="0" selected>待审核</option>
                    <option value="1">已通过</option>
                    <option value="2">已驳回</option>
                </select>
            </div>
        </div>
        <div class="layui-inline" style="margin-left: -20px;">
            <label class="layui-form-label">申请人：</label>
            <div class="layui-input-inline">
                <input type="text" value="" placeholder="请输入申请人姓名" id="name"
                       class="layui-input search_input">
            </div>
        </div>
        <div class="layui-inline" style="margin-left: -20px;">
            <label class="layui-form-label">联系电话：</label>
            <div class="layui-input-inline"  >
                <input type="text" value="" placeholder="请输入申请人电话" id="username"
                       class="layui-input search_input">
            </div>
        </div>
        <div class="layui-inline">
            <button class="layui-btn"  lay-submit="" lay-filter="search"><i class="layui-icon">&#xe615;</i>查询</button>
        </div>

    </form>
    <div class="layui-inline">
        <div class="layui-form-mid layui-word-aux"></div>
    </div>
</blockquote>

<div class="layui-form links_list">
    <table shiro:hasPermission="liveapply_list" id="demo" lay-filter="test" class="layui-hide"></table>

</div>

<script type="text/html" id="changebar">
    {{# if(d.status==0){ }}
    <a  shiro:hasPermission="liveapply_update" class="layui-btn layui-btn-normal layui-btn-xs" lay-event="pass">通过</a>
    <a  shiro:hasPermission="liveapply_update" class="layui-btn layui-btn-danger layui-btn-xs" lay-event="reject">驳回</a>
    {{# } }}
    {{# if(d.status==1){ }}
    <span class="layui-btn layui-btn-disabled layui-btn-xs" >已通过</span>
    {{# } }}
    {{# if(d.status==2){ }}
    <span class="layui-btn layui-btn-disabled layui-btn-xs" >已驳回</span>
    {{# } }}

</script>
<script type="text/html" id="status">
    {{# if(d.status==0){ }}
   <span class="layui-btn layui-btn-warm layui-btn-xs">待审核</span>
    {{# } }}
    {{# if(d.status==1){ }}
   <span class="layui-btn layui-btn-normal layui-btn-xs" >已通过</span>
    {{# } }}
    {{# if(d.status==2){ }}
    <span class="layui-btn layui-btn-danger layui-btn-xs" >已驳回</span>
    {{# } }}
</script>
<script type="text/html" id="show">
    <img src="{{d.img_url}}" style="height: 50px">
</script>
<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
    </div>
</script>

</body>
<script>
    layui.use([ 'table', 'layer','form', 'laytpl' ,'element'], function() {
        var table = layui.table;
        var element = layui.element;
        var $ = layui.jquery;
        var layer = layui.layer;
        var form = layui.form;
        var laytpl = layui.laytpl;
        var element = layui.element;

        <!---------------------重载实现模糊查询---------------- -->
        form.on('submit(search)', function(data){
            var name = $("#name").val();
            var username = $("#username").val();
            var status=$("#status1").val();

            table.reload('allsel', {
                url : '/dangxia/review/getrentAll',
                method : 'post',
                where : {
                    name : name,
                    username : username,
                    status:status
                }
            });

            return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
        });


      <!--------------------  表格数据-------------------------->
        table.render({
            elem: '#demo',
            height: 312,
            toolbar:'#toolbarDemo',
            id:'allsel',
            url: '/dangxia/review/getrentAll?status=0', //数据接口
            // page: true //开启分页
            limits:[2,5,10,20],
            limit:2,
            page:true,
            cols : [ [ //表头
                {  style:'height:80px;',
                    type:'checkbox',
                    fixed: 'left'
                }, {
                    field : 'id',
                    title : '编号',
                    sort : true
                },{
                    field : 'name',
                    title : '申请人',
                }, {
                    field : 'username',
                    title : '手机号'
                },{
                    field : 'pay_amount',
                    title : '支付金额'
                }, {
                    field : 'apply_time',
                    title : '申请入住时间',
                },{
                    field : 'end_time',
                    title : '申请到期时间',
                    sort:true
                },
                {
                   field: 'img_url',
                    title: '图片',
                    unresize: true,
                    width: 150,
                    style:'height:80px;',
                   /* templet:'<div><img src="{{ d.img_url }}"></div>'*/
                    templet:"#show"
                },
                {
                    field : 'status',
                    title : '订单状态',
                    templet:'#status',
                    align:'center'
                },
                {   field:'right',
                    title : '操作',
                    align : 'center',
                    toolbar : '#changebar'
                } ] ],
            initSort:{
                field:'id',
                type:'desc'
            },

            done:function(res,curr,count){
                hoverOpenImg();//显示大图
                $('table tr').on('click',function(){
                    $('table tr').css('background','');
                    $(this).css('background','white');
                });
            }

        });
        function hoverOpenImg(){
            var img_show = null; // tips提示
            $('td img').hover(function(){
                var kd=$(this).width();
                kd1=kd*3;          //图片放大倍数
                kd2=kd*3+30;       //图片放大倍数
                var img = "<img class='img_msg' src='"+$(this).attr('src')+"' style='width:"+kd1+"px;' />";
                img_show = layer.tips(img, this,{
                    tips:[2, 'rgba(41,41,41,.5)']
                    ,area: [kd2+'px']
                });
            },function(){
                layer.close(img_show);
            });
            $('td img').attr('style','max-width:80px;display:block!important');
        }

        <!------------------------------行操作栏------------------- -->
        table.on('tool(test)', function(obj) { //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
            var data = obj.data; //获得当前行数据
            var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
            var tr = obj.tr; //获得当前行 tr 的DOM对象

        if (layEvent === 'pass') { //审核通过
            console.log(data);
                layer.confirm('确定通过吗', function(index) {
                  $.ajax({
                      url:"/dangxia/review/passrent",
                      method:'post',//method请求方式，get或者post
                      dataType:'json',//预期服务器返回的数据类型
                      data:data,
                      success:function (res) {
                          if(res.code==0){
                              layer.msg(res.msg,{icon:6,time:1000},function () {
                                  location.reload();
                              })
                          }else{
                              layer.msg(res.msg,{icon:5,time:1000},function () {
                                  location.reload();
                              })
                          }

                      }
                  });

                    layer.close(index);
                });



            }
            /*---------------另一个业务--------------------------*/
            else if (layEvent === 'reject') { //审核驳回
            var index1=layer.confirm('确定要驳回吗', function(index) {

                layer.prompt({
                    formType : 2,
                    value : '',
                    title : '请输入驳回理由',
                    area : [ '200px', '200px' ]
                    //自定义文本域宽高
                }, function(value, index, elem) {
                    //得到value
                    layer.close(index);

                    $.post("/dangxia/review/reject", {
                        "id" : data.id,
                        "msg":"rejectrent"
                    }, function(res) {
                        if (res.code == 0) {
                            layer.msg("已驳回",{icon:6,time:1000},function () {
                                location.reload();
                            })
                        }

                    });

                });
                layer.close(index1);

            });



            }
        });

    });
</script>
</html>